<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<meta content="always" name="referrer">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <!--[if lt IE 9]>
			<script type="text/javascript">
				window.location.href = "tip.html"
			</script>
		<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/order.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/wang.js"></script>
    <style>

        .view .arrow-left {
            background: url(img/index_tab_l.png) no-repeat left top;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -25px;
            width: 28px;
            height: 51px;
            z-index: 10;
        }

        .view .arrow-right {
            background: url(img/index_tab_r.png) no-repeat left bottom;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -25px;
            width: 28px;
            height: 51px;
            z-index: 10;
        }



        .preview .slide6 {
            width: 82px;
        }

        .preview .arrow-left {
            background: url(img/feel3.png) no-repeat left top;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -9px;
            width: 9px;
            height: 18px;
            z-index: 10;
        }

        .preview .arrow-right {
            background: url(img/feel4.png) no-repeat left bottom;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -9px;
            width: 9px;
            height: 18px;
            z-index: 10;
        }

        .preview img {
            padding: 1px;
        }

        .preview .active-nav img {
            padding: 0;
            border: 1px solid #F00;
        }
    </style>
	    <style>
		#userName{
			float: left;
			width: 75px;
			text-align: center;
			position: relative;
			cursor: pointer;
			display: none;
		}
		#userName li:after{
			display:block;content:"";visibility:hidden;height:0;
			border-bottom:  1px solid #000000;
		}
		#userName dl{
			top: 42px;
			width: 100%;
			position: absolute;
			display: none;
			background: #fff;
			z-index: 9999;
		}
	</style>
</head>
<body>
    <div class="header">
	<div class="w_1190">
		<div class="h_right fr">
			<a href="index.html">YIXA首页</a>
			<a href="dingdan.html">我的订单</a>
			<a href="zhanghu.html">账户设置</a>
			<a href="about.html">关于我们</a>
		</div>
		<div class="h_left">
			<ul id="userName">
				<li></li>
				<dl>
					<dd>退出登录</dd>
				</dl>
			</ul>
			<!-- 未登录 -->
				
				<a href="login.html" class="c_01afff" id="login">登录</a>
				<a href="register.html" class="registerno">免费注册</a>
			<!-- 已登录 -->
		</div>
	</div>
</div>
<script type="text/javascript">
	
	$("#userName").on("click",function(){
	    $(this).find("dl").slideToggle(200)
	})
	
	$("#userName dd").on("click",function(){
	    $.ajax({
	    	type:"post",
	    	url:"http://52lvu.cn:8080/api/login/logout",
	        data:{
	            userId : token.userId
	        },success : function (result){

	            
	            if (result.resultCode == 200) {
	            	localStorage.removeItem("token");
	            	window.location.href="login.html"
	            }
	            
	        },error : function (e){
	            layui.msg("请求错误，请稍后重试",{icon:2,time:2000})
	        }
	    });
	})
	
	var token = JSON.parse(localStorage.getItem('token'));
	
	if (token) {
		var expiredTime = 1800000;
		var loginTime = token.loginTime
		var nowTime = new Date().getTime();

		
		if ( (nowTime - loginTime) > expiredTime ) {
			localStorage.removeItem("token");
			window.location.href = "login.html";
		}else{
			$("#userName").show(); 
			$(".registerno").hide();
			$("#login").hide()
			$("#userName li").html(token.userName)
		}
	}else{
	    window.location.href="login.html";
	}
	
</script>
    <div class="bar w-1200">
        <ul class="first">
            <li class="num"><i class="active">1</i></li>
            <li class="desc">1 选择您的客房</li>
        </ul>
        <ul class="second">
            <li class="num"><i class="active">2</i></li>
            <li class="desc">2 填写您的信息</li>
        </ul>
        <ul class="third">
            <li class="num"><i>3</i></li>
            <li class="desc">3 支付订单</li>
        </ul>
    </div>

    <div class="order-list w-1200">
        <div class="lift">
            <div class="head">
                <div class="title clearfloat">
                    <ul class="fl">订单详情</ul>
                    <ul class="fr">房间数量</ul>
                </div>
                <div class="container clearfloat">
                    <div class="cont-left">
                        <div class="banner">
                            <div class="wrapper" id="bannerList">
                                
                            </div>
                        </div>
                        <div class="btn-list" id="bannerBtn">
                        	
                        </div>
                        <div class="desc" id="desc">
                            <ul class="tit"></ul>
                            <ul class="list">
                                
                            </ul>
                        </div>
                    </div>
                    <div class="cont-right">
                        <ul class="list" id="roomMoney">
                            <!--<li class="clearfloat">
                                <p class="fl">客房数量</p>
                                <p class="fr">2间</p>
                            </li>-->
                            
                        </ul>
                        <!--<ul class="money clearfloat">
                            <li class="fl">总价</li>
                            <li class="fr">￥2506</li>
                        </ul>-->
                    </div>
                </div>
            </div>
            
            <div class="chooseList" id="chooseList">
                
            </div>

        </div>
    </div>

    <div class="w-1200">
        <a id="nextBtn" style="padding: 0 30px;margin: 40px 0;cursor:pointer;line-height: 50px;color: #ffffff;background: #ff6002;float: right;border-radius: 20px;font-size: 18px;">下一步</a>
    </div>
    <div id="qq">
    	
    </div>
</body>
</html>
<script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<!--
	
-->
<script id="roomType" type="text/html">
	<!--{{# for(var j = 0, len = d.roomNum ; j < len; j++){ }}-->
		
		<div class="choose">
	        <div class="tit">您的选择</div>
	        <div class="top">
	            <ul class="caption clearfloat">
	                <li class="fl">{{d.roomName}}-{{i}}</li>
	                <li class="fr"></li>
	            </ul>
	            <ul class="people clearfloat">
	                <li class="fl">住客</li>
	                <li class="fr selectbox">
	                    <select name="" id="" class="choosePeople" onchange="addItem(this)">
	                        <option value="">1</option>
	                        <option value="">2</option>
	                        <option value="">3</option>
	                        <option value="">4</option>
	                    </select>
	                </li>
	                <li class="fl" style="margin-left: 10px;">请选择每间房的入住人数</li>
	            </ul>
	        </div>
	        <div class="people-list">
	            <div class="item clearfloat" data-roomId='{{d.roomId}}'>
			        <ul class="clearfloat row1">
			            <li class="selectbox">
			                <p class="fl">姓名(中文)：</p>
			            </li>
			            <li class="name">
			                <p class="fr"><input type="text" placeholder="请填写中文名" class="userName yz"></p>
			            </li>
			        </ul>
			        <ul class="row2">
			            <li class="fl">姓名（拼音或英文） <span>*</span>：</li>
			            <li class="fr"><input type="text" class="englisthName yz" placeholder="请填写英文名"></li>
			        </ul>
			        <ul class="row2">
			            <li class="fl">性别 <span>*</span>：</li>
			            <li class="fr sex">
			            	<p></p><i>男</i>
			            	<p></p><i>女</i>
			            </li>
			        </ul>
			        <ul class="row2">
			            <li class="fl">出生日期 <span>*</span>：</li>
			            <li class="fr">
							<div class="layui-inline">
				                <div class="layui-input-inline">
				                    <input type="text" class="layui-input birthday yz"  placeholder="yyyy-MM-dd" lay-key="1">
				                </div>
				            </div>
			            </li>
			        </ul>
			        <ul class="row2">
			            <li class="fl">手机号码 <span>*</span>：</li>
			            <li class="fr"><input type="text" class="userPhone yz"></li>
			        </ul>
			        <ul class="row2">
			            <li class="fl">护照号码 <span>*</span>：</li>
			            <li class="fr"><input type="text" class="idCard yz"></li>
			        </ul>
			        <ul class="row3 clearfloat schz">
			            <li class="fl">上传护照首页：</li>
			            <li class="fr">
			                <div class="layui-upload-drag uploadBtn" style="float: left;padding: 0;width: 150px;">
							  <i class="layui-icon" style="line-height: 30px;font-size: 30px;display: block;margin-top: 20px;">&#xe681;</i>
							  <p style="line-height: 40px;">点击上传</p>
							</div>
							<div class="layui-upload-list uploadBOx" style="float: left;display: none;margin-left: 20px;">
						    	<img class="layui-upload-img uploadImg">
						  	</div>
			            </li>
			        </ul>
			    </div>
        	</div>
    	</div>
	<!--{{# } }}-->	
</script>
<script id="roomInfo" type="text/html">
	{{# for(var i = 0, len = d.orderDetailEntities.length ; i < len; i++){ }}
		<li class='clearfloat'>
			{{#  if(d.orderDetailEntities[i].roomName){ }}{{d.orderDetailEntities[i].roomName}}{{#  } }}
			{{#  if(d.orderDetailEntities[i].roomNum){ }}{{d.orderDetailEntities[i].roomNum}}{{#  } }}间
			{{#  if(d.orderDetailEntities[i].isBigBad == 1 ){ }}
				双人床
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].isBigBad == 0 ){ }}
				单人床
			{{#  } }}
		</li>
		<li>
			{{#  if(d.orderDetailEntities[i].orderPeople){ }}成人{{d.orderDetailEntities[i].orderPeople}}人{{#  } }}
			{{#  if(d.orderDetailEntities[i].roomMoney){ }}*{{d.orderDetailEntities[i].roomMoney}}元{{#  } }}
			{{#  if(d.dayNum){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  if(d.orderDetailEntities[i].childNum != 0){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].childNum && d.orderDetailEntities[i].childNum != 0){ }}
				儿童
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 0){ }}
				(不占床)
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 1){ }}
				(占床)
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].childNum != 0){ }}
				{{d.orderDetailEntities[i].childNum}}人
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 0 && d.orderDetailEntities[i].childprice){ }}
				*{{d.orderDetailEntities[i].childprice}}元
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 1 &&  d.orderDetailEntities[i].childbedprice){ }}
				*{{d.orderDetailEntities[i].childbedprice}}元
			{{#  } }}
			{{#  if(d.dayNum && d.orderDetailEntities[i].childNum!= 0){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
		{{#  if(d.orderDetailEntities[i].addBedNum != 0){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].addBedNum != 0){ }}加床{{d.orderDetailEntities[i].addBedNum}}人{{#  } }}
			{{#  if(d.orderDetailEntities[i].addbedprice){ }}*{{d.orderDetailEntities[i].addbedprice}}元{{#  } }}
			{{#  if(d.dayNum && d.orderDetailEntities[i].addBedNum!= 0){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
		{{#  if(d.orderDetailEntities[i].difference != 0){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].difference != 0){ }}单房差{{d.orderDetailEntities[i].difference}}人{{#  } }}
			{{#  if(d.orderDetailEntities[i].singleprice && d.orderDetailEntities[i].difference != 0){ }}*{{d.orderDetailEntities[i].singleprice}}元{{#  } }}
			{{#  if(d.dayNum && d.orderDetailEntities[i].singleprice != 0){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
	{{# } }}
</script>
<script src="js/ajaxSet.js" type="text/javascript" charset="utf-8"></script>
<script>
	
layui.use(['form', 'layedit', 'laydate','laytpl','element','upload'], function() {
    var form = layui.form
        , layer = layui.layer
        , element = layui.element
        , layedit = layui.layedit
        , laydate = layui.laydate
        , laytpl = layui.laytpl
        , upload = layui.upload;
       $("#qq").load("lib/qq.html");$("#footer").load("lib/footer.html");
        var roomTypeCont = roomType.innerHTML;
        
		var json = JSON.parse(localStorage.getItem("orderJson"));
    	
    	if (json && json.hotelId == wang.getQueryString("id")) {
    		
    	}else{
    		layer.msg("出现错误！请重新选择",{icon:2,time:3000});
    		if (wang.getQueryString("id") && wang.getQueryString("hotelId") ) {
    			setTimeout(function(){
	    		    window.location.href = "info.html?id"+wang.getQueryString("id")+"&hotelId="+wang.getQueryString("hotelId")
	    		},1500)
    		}else{
    			setTimeout(function(){
	    		    window.location.href = "index.html";
	    		},1500)
    		}
    	}
    	
    	$.ajax({
	        type:"post",
	        url:"http://52lvu.cn:8080/api/hotel/getHotel",
	        data :{
	        	id : wang.getQueryString("id")
	        },
	        success : function (result){

	            if (result.data) {
	            	var data = result.data;
		        	var picList = data.picture.split(";")

		        	for ( i = 0 ; i < picList.length && i < 4 ; i++) {
		        		$("#bannerList").append("<div class='slide' style='width: 225px;'><a><img src='http://52lvu.cn:8080/hotel/upload"+picList[i]+"' /></a></div>")
		        		$("#bannerBtn").append("<div class='slide'><a><img src='http://52lvu.cn:8080/hotel/upload"+picList[i]+"' /></a></div>")
		        	}
		        	
		        	wang.banner(".banner",{
					    autoplay:3000
					});
					
					$("#bannerBtn .slide").on("click",function(){
					    var thisIndex = $(this).index();
					    $("#bannerList").animate({"left":-225*thisIndex+"px"})
					})
					
		        	
	        	}
	         },error:function (){
	         	layer.msg("请求错误！请稍后重试",{icon:2,time:3000});
	         }
	     })
    	
    	$("#desc .tit").html(json.hotelName);
    	
    	try{
    		$("title").html(json.hotelName);
    	}catch(e){
    		document.title =json.hotelName;
    	}
    	
    	
   		$("#desc .list").empty()
			var roomNum = 0;
			
			var roomInfoCont = roomInfo.innerHTML;
			
			
			laytpl(roomInfoCont).render(json, function(html){	
				$("#roomMoney").html(html);
			});	
			$("#roomMoney").append("<li style='font-size: 24px;margin-top: 5px;'>总计：<i style='color: red;'>"+json.orderPirce+"元</i></li>")
			
			for (i = 0 ; i < json.orderDetailEntities.length ; i++) {
				$("#desc .list").append("<li class='clearfloat'><p class='fl'>房间类型</p><p class='fr'>"+json.orderDetailEntities[i].roomName+"</p></li>")
				$("#chooseList").append("<div class='item"+i+"'></div>")
				
				laytpl(roomTypeCont).render(json.orderDetailEntities[i], function(html){	
					$("#chooseList").find(".item"+i).html(html);
				});
				
			}

			

			$(".sex p").on("click",function(){
				$(this).addClass("sextive").siblings().removeClass("sextive");
			    $(this).parents(".item").attr({"data-sex":$(this).index()});
			})
			$("#desc .list").append("<li class='clearfloat'><p class='fl'>入住时间</p><p class='fr'>"+json.startTime+"-"+json.endTime+"</p></li>")
			
		upload.render({
		    elem: '.uploadBtn'
		    ,url: 'http://52lvu.cn:8080/common/api/upload?file_type=passport'
		    ,exts : 'jpg|jpeg|png|bmp|png'
		    ,multiple : false
		    ,drag:false
		    ,data:{
		    	file_type : "passport"
		    }
		    ,auto : true
		    ,before: function(obj){

		    },done: function(res,index){
		    	
		    	if (res.message == "成功") {
		    		var item = this.item || this.elem;
		    		$(item).parents(".item").attr({"data-img":res.createFilePath});
		    		$(item).parents(".item").find(".uploadBOx").show();
		    		$(item).parents(".item").find(".uploadImg").attr('src', "http://52lvu.cn:8080/hotel/upload"+res.createFilePath)
		    	}else{
		    		layer.msg("上传失败",{icon:2,time:2000})
		    	}
		    	
		    }
		});

	})

function addItem (modern){

	var itemNum = $(modern).find("option:selected").html();
	
	var itemLen = $(modern).parents(".choose").find(".people-list").find(".item").length ;
	
	if (itemNum > itemLen) {
		for ( i = itemLen ; i < itemNum ; i++) {
			var copy = $(modern).parents(".choose").find(".people-list").find(".item").eq(0).clone(true);
			var id = copy.attr("data-roomid");
			copy.find("input[type='text']").val("");
			copy.removeAttr("data-img");
			copy.find(".sex").find("input").attr("name","sex"+i+id);
			$(modern).parents(".choose").find(".people-list").append(copy);
		}
	}else{
		for ( i = itemLen-1 ; i >= itemNum ; i--) {
			$(modern).parents(".choose").find(".people-list").find(".item").eq(i).remove();
		}
	}

}

$(".btn-list .slide").on("click",function (){

    var thisIndex = $(this).index();
    $(".banner .wrapper").animate({
        left: - thisIndex * 225 + "px"
    },300);
    $(this).addClass("active").siblings().removeClass("active");
})

$("#nextBtn").on("click",function(){
	
	var layer = layui.layer;
	var sp = true;
	for(i = 0 ; i < $(".yz").length ; i++){
		if ($(".yz").eq(i).val() == "") {
			layer.msg("请填写完信息在提交",{icon:2,time:2000})
			sp = false ;
			return false;
		}
	}
	
	for(i = 0 ; i < $(".item").length ; i++){
		if ($(".item").eq(i).attr("data-img") == undefined || $(".item").eq(i).attr("data-sex") == undefined || $(".item").eq(i).attr("data-img") == "" || $(".item").eq(i).attr("data-sex") == ""){
			layer.msg("请填写完信息在提交",{icon:2,time:2000})
			sp = false ;
			return false;
		}
	}
	
	
	if (sp) {
		    var json = JSON.parse(localStorage.getItem("orderJson"));
    
		    var itemNum = 0;
		    
		    for (i = 0 ; i < $(".choosePeople").length ; i++) {
		    	itemNum += Number($(".choosePeople").eq(i).find("option:selected").html());
		    }
		    
		    for (var  i = 0 ; i < $(".item").length ; i++) {
		    	
		    	var thisId = $(".item").eq(i).attr("data-roomid");
				var sex = "男";
		    			
    			if ($(".item").eq(i).attr("data-sex") == 0 ) {
    				sex = "男";
    			}
    			
    			if ( $(".item").eq(i).attr("data-sex") == 2 ) {
    				sex = "女";
    			}
    			
		    	$.each(json.orderDetailEntities , function(index,item) {
		    		
		    		if (thisId == json.orderDetailEntities[index].roomId) {
		    			
		    			
		    			item.orderGuestEntities.push({
			    			guestName : $(".item").eq(i).find(".userName").val(),
			    			phone :  $(".item").eq(i).find(".userPhone").val(),
			    			idCard	: $(".item").eq(i).find(".idCard").val(),
			    			passport : $(".item").eq(i).attr("data-img"),
			    			spell : $(".item").eq(i).find(".englisthName").val(),
			    			birth : $(".item").eq(i).find(".birthday").val(),
			    			sex : sex
			    		})
		    		}
		    	});
		    }
		
		    json.orderPeople = itemNum ;
		    
		    localStorage.orderJson = JSON.stringify(json);
		    
		    var token = JSON.parse(localStorage.getItem("token"));
		
		    json.id = token.id ;
		    localStorage.setItem('orderJson',JSON.stringify(json)); 

			$.ajax({
			    type:"post",
			    url:"http://52lvu.cn:8080/api/order/addOrder",
			    data:{
					token : token.token,
					userId	: token.id,
			    	json : JSON.stringify(json)
			    },
			    success : function (result){
		
			        if (result.resultCode == "200") {
			        	json.data = result.data;
		
			        	setTimeout(function(){
			        	    window.location.href ='confirm.html?id='+wang.getQueryString("id")+"&orderId="+result.data;
			        	},1000)
			        	
			        }else if (result.resultCode == "104"){
			        	layer.msg("登录超时，请重新登录",{icon:2,time:2000})
			        } else{
			        	layer.msg("请求错误，请尝试重新登录",{icon:2,time:2000})
			        }
			        
			    },error : function (e){
			        layer.msg("请求错误，请稍后重试",{icon:2,time:2000})
			    }
			});
	}

})
</script>